<template>
  <div class="platform">
    <div>
      <h3 class="platform-title" />
      <!-- <span class="pl-date">{{ date }}</span> -->
      <div
        class="platform-box flex flexdc"
        :style="`height: ${clientHeight}px`"
      >
        <ul v-if="titleList !== []" ref="ul" class="flexwrap ul" :style="`height: ${clientHeight}px`">
          <li v-for="(item, i) in titleList" :key="item.id" :class="`li${item.id}`" @click="handleEntryPlatform(item.id)">
            <!-- <span>{{ item.sysName }}</span> -->
            <transition v-if="i < 9" name="t1">
              <div v-show="isShowMin" ref="d1" :class="`platform-${item.id} p1 pl-title`" />
            </transition>
            <transition v-else name="t2">
              <div v-show="isShowMax" ref="d2" :class="`platform-${item.id} p2 pl-title`" />
            </transition>
          </li>
        </ul>
        <div v-show="titleList.length > 9" class="divlinebox flex">
          <div
            v-for="(item1, v)
              in Math.ceil(titleList.length / 6)"
            ref="line"
            :key="v"
            :class="`line${v} divline`"
            @click="handleToPaging(v)"
          />
        </div>
      </div>
      <div class="flex outBtnbox m-l-60">
        <p class="outbtn" @click="getOut">退出登陆</p>
      </div>
    </div>
    <div class="footers">
      Copyright &copy;2012-2020. All Rights Reserved 凌波技术有限公司
    </div>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import storage from '@/utils/storage'
import { showNotice } from '@/utils/toolclass'
import { findPlatforms } from '@/api/baseInfo/authority/resources'
import { removeToken } from '@/utils/auth'

export default {
  name: 'Platform',
  data() {
    return {
      titleList: [],
      date: '',
      platfroms: [],
      clientHeight: '',
      clientWidth: '',
      isShowMin: true,
      isShowMax: false
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/platform' }))
    this.titleList = JSON.parse(storage.get('systems'))
    this.date = this.$moment().format('YYYY-MM-DD HH:mm')
    // console.log(this.titleList)
    // this.clientWidth = (document.documentElement.clientWidth || document.body.clientWidth) - 180
    this.clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 120
    // console.log(document.documentElement.clientHeight)
  },
  mounted() {
    this.$store.state.routerList = []
    // storage.clear()
    storage.set('platform', this.titleList)
    // console.log(JSON.parse(storage.get('data')))
    // console.log(JSON.parse(storage.get('platform')))
    this.data = JSON.parse(storage.get('data'))
    this.getPlatfroms()
  },
  methods: {
    handleToPaging(i) {
      // console.log(i)
      if (i === 0) {
        this.isShowMax = false
        setTimeout(() => {
          this.isShowMin = true
        }, 1000)
        this.$refs.line[0].style.backgroundColor = '#3CB371'
        this.$refs.line[1].style.backgroundColor = 'rgba(255, 255, 255, 0)'
      } else {
        this.isShowMin = false
        setTimeout(() => {
          this.isShowMax = true
        }, 1000)
        this.$refs.line[0].style.backgroundColor = 'rgba(255, 255, 255, 0)'
        this.$refs.line[1].style.backgroundColor = '#3CB371'
      }
    },
    getPlatfroms() {
      findPlatforms().then(res => {
        if (res.code === '000000') {
          // console.log(res)
          this.platfroms = res.data
        }
      })
    },
    handleEntryPlatform(id) {
      // console.log(id)
      this.platfroms.map(item => {
        // console.log(item)
        if (item.id === id) {
          if (item.displayType === 2) {
            showNotice('warning', '提示', '请先备案')
            return
          }
          if (id === 6) {
            this.$router.push({ path: '/bigDataMenu' })
            // var a = document.createElement('a')
            // a.setAttribute('href', 'http://show.linkpow.cn:8080/bigdata/emergency/index.html')
            // a.setAttribute('target', '_blank')
            // a.click()
            return
          } else {
            this.$router.push({ path: '/guidePage' })
            // return
          }
          storage.set('id', id)
          this.titleList.filter(item => {
            // console.log(item)
            if (item.id === id) {
              storage.set('title', item)
              return storage.set('title', item)
            }
          })
          this.$store.dispatch('changeRouter', id)
        }
      })
    },
    getOut() {
      this.$store.dispatch('user/loginOut', this.data.data.id).then((res) => {
        // this.$router.replace({ path: '/' })
        if (res.code === '000000') {
          removeToken()
          storage.clear()
          this.$store.state.routerList = []
        }
      })
    }
  }
}
</script>

<style lang="scss">
.platform {
  // margin: 30px 20px;
  background: url('~@/assets/home/bj.png') no-repeat;
  background-size: 100% 100%;
  .outBtnbox {
    justify-content: center;
    height: 96%;
    position: fixed;
    right: .3%;
    top: -10px;
    .outbtn {
      width: 100px;
      height: 50px;
      line-height: 40px;
      cursor: pointer;
      color: #ffffff;
    }
  }
  .pl-date {
    color: #ffffff;
    position: fixed;
    left: 4px;
    top: 36px;
  }
  .platform-title {
    width: 100%;
    height: 60px;
    margin-top: 0;
    background: url('~@/assets/home/title.png') no-repeat;
    background-size: 100% 100%;
  }
  .moreIcon{
    position: absolute;
    right: 10px;
  }
  .platform-box {
    width: 100%;
    height: 100%;
    position: relative;
    .divlinebox {
      height: 80px;
      justify-content: center;
      align-items: center;
      .divline {
        width: 15px;
        height: 15px;
        border: 1px solid #ffffff;
        border-radius: 50%;
        justify-content: center;
        // margin: -10px auto 0;
        cursor: pointer;
      }
      .line0 {
        background: #3CB371;
        margin: 0 20px 0 60px;
      }
      .line1 {
        background: rgba(255, 255, 255, 0);
      }
    }
    ul {
      width: 1200px;
      // flex: 1;
      display: flex;
      // align-items: center;
      justify-content: center;
      margin: 20px auto 0;
      li {
        .pl-title {
          // min-width: 340px;
          // height: 90%;
          // border-radius: 5px;
          // height: 220px;
          // margin-bottom: 20px;
          // margin-right: 40px;
          cursor: pointer;
        }
      }
      .li10 {
        height: 220px;
      }
      .li9 {
        height: 220px;
      }
      .li8 {
        height: 220px;
      }
      .li7 {
        height: 220px;
      }
      // 基础数据
      .platform-1 {
        width: 320px;
        height: 220px;
        margin: 0 0 0 70px;
        background: url('~@/assets/home/jcsj.png') no-repeat;
        background-size: 100% 100%;
      }
      // 维保备案
      .platform-2 {
        width: 360px;
        height: 220px;
        // margin-right: 60px;
        // margin-left: 60px;
        background: url('~@/assets/home/wbba.png') no-repeat;
        background-size: 100% 100%;
      }
      // 维保管理
      .platform-3 {
        width: 340px;
        min-height: 240px;
        margin: -20px 0 0 55px;
        background: url('~@/assets/home/wbgl.png') no-repeat;
        background-size: 100% 100%;
      }
      // 凌波运营
      .platform-4 {
        width: 370px;
        height: 220px;
        margin: 30px 10px 30px 20px;
        background: url('~@/assets/home/lbyy.png') no-repeat;
        background-size: 100% 100%;
      }
      // 政府平台
      .platform-5 {
        width: 360px;
        height: 220px;
        margin: 30px 0;
        background: url('~@/assets/home/zhgl.png') no-repeat;
        background-size: 100% 100%;
      }
      // 大数据
      .platform-6 {
        width: 390px;
        height: 220px;
        margin: 30px 0;
        background: url('~@/assets/home/dsj.png') no-repeat;
        background-size: 100% 100%;
      }
      // 物联网
      .platform-7 {
        width: 370px;
        height: 220px;
        margin: 0 0px 0 20px;
        background: url('~@/assets/home/wlw.png') no-repeat;
        background-size: 100% 100%;
      }
      // 智慧小区
      .platform-8 {
        width: 310px;
        height: 220px;
        margin: 0 30px 0 60px;
        background: url('~@/assets/home/zhxq.png') no-repeat;
        background-size: 100% 100%;
      }
      .platform-9 {
        width: 335px;
        height: 220px;
        margin: 0 0 0 25px;
        background: url('~@/assets/home/ydpt.png') no-repeat;
        background-size: 100% 100%;
      }
      .platform-10 {
        width: 330px;
        height: 220px;
        background: url('~@/assets/home/rmt.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
    /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
    .t1-enter,
    .t1-leave-to {
      opacity: 0;
      transform: translateX(-600px);
    }

    /* v-enter-active 【入场动画的时间段】 */
    /* v-leave-active 【离场动画的时间段】 */
    .t1-enter-active,
    .t1-leave-active{
      transition: all 0.8s ease;
    }
    .t2-enter,
    .t2-leave-to {
      opacity: 0;
      transform: translateX(600px);
    }

    /* v-enter-active 【入场动画的时间段】 */
    /* v-leave-active 【离场动画的时间段】 */
    .t2-enter-active,
    .t2-leave-active{
      transition: all 0.8s ease;
    }
  }

  .footers {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: #ffffff;
  }
}
</style>

